<template>
  <StarfieldBackground>
    <div class="login-wrapper" ref="loginWrapperRef">
      <!-- 左侧背景 -->
      <div class="login-bg">
        <div class="bg-content">
          <h1>项目管理系统</h1>
          <p>高效协作，精准管理，助力项目成功</p>
          <div class="feature-list">
            <div class="feature-item">
              <el-icon><Check /></el-icon>
              <span>项目全生命周期管理</span>
            </div>
            <div class="feature-item">
              <el-icon><Check /></el-icon>
              <span>任务协作与跟踪</span>
            </div>
            <div class="feature-item">
              <el-icon><Check /></el-icon>
              <span>数据可视化分析</span>
            </div>
            <div class="feature-item">
              <el-icon><Check /></el-icon>
              <span>权限精细化控制</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧登录表单 -->
      <div class="login-form-wrapper">
        <div class="login-form" :class="{ shake: formShake }">
          <div class="form-header">
            <h2>欢迎登录</h2>
            <p>请输入您的账号和密码</p>
          </div>

          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginRules"
            size="large"
            @keyup.enter="handleLogin"
          >
            <el-form-item prop="username" class="form-step" :class="{ 'step-visible': stepVisible >= 1 }">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                :prefix-icon="User"
                clearable
                @focus="showNextStep(2)"
              />
            </el-form-item>

            <el-form-item prop="password" class="form-step" :class="{ 'step-visible': stepVisible >= 2 }">
              <el-input
                v-model="loginForm.password"
                :type="passwordVisible ? 'text' : 'password'"
                placeholder="请输入密码"
                :prefix-icon="Lock"
                clearable
                @focus="showNextStep(3)"
                @keydown="handlePasswordKeydown"
              >
                <template #suffix>
                  <div class="password-controls">
                    <el-icon 
                      class="password-toggle" 
                      @click="passwordVisible = !passwordVisible"
                      :class="{ active: passwordVisible }"
                    >
                      <component :is="passwordVisible ? 'View' : 'Hide'" />
                    </el-icon>
                    <div v-if="capsLockOn" class="caps-lock-warning">
                      <el-icon><Warning /></el-icon>
                      <span>Caps Lock 已开启</span>
                    </div>
                  </div>
                </template>
              </el-input>
              <div class="password-strength" v-show="loginForm.password">
                <div class="bar" :style="{ width: passwordScore * 25 + '%', background: passwordGradient }"></div>
                <span class="label">{{ passwordLabel }}</span>
              </div>
            </el-form-item>

            <el-form-item class="form-step" :class="{ 'step-visible': stepVisible >= 3 }">
              <div class="form-options">
                <el-checkbox v-model="loginForm.remember">
                  记住密码
                </el-checkbox>
                <el-link type="primary" :underline="false" @click="handleForgotPassword">
                  忘记密码？
                </el-link>
              </div>
            </el-form-item>

            <el-form-item class="form-step" :class="{ 'step-visible': stepVisible >= 4 }">
              <el-button
                type="primary"
                size="large"
                :loading="loading"
                @click="handleLogin"
                class="login-btn"
                :class="{ 'btn-loading': loading }"
              >
                <span class="btn-text">{{ loading ? '登录中...' : '登录' }}</span>
                <div v-if="loading" class="btn-particles"></div>
              </el-button>
            </el-form-item>
          </el-form>

          <!-- 快速登录 -->
          <div class="quick-login">
            <el-divider>
              <span class="divider-text">快速登录</span>
            </el-divider>
            <div class="quick-login-buttons">
              <el-button @click="handleQuickLogin('admin')" :loading="loading">
                管理员登录
              </el-button>
              <el-button @click="handleQuickLogin('user')" :loading="loading">
                普通用户登录
              </el-button>
            </div>
          </div>

          <!-- 注册链接 -->
          <div class="register-link">
            <span>还没有账号？</span>
            <el-link type="primary" :underline="false" @click="handleRegister">
              立即注册
            </el-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 版权信息 -->
    <div class="copyright">
      <p>&copy; 2024 项目管理系统. All rights reserved.</p>
    </div>
  </StarfieldBackground>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { User, Lock, Check, Warning } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { login as loginApi, type LoginResponse } from '@/api/auth'
import { storageManager } from '@/utils/storage'
import StarfieldBackground from '@/components/StarfieldBackground.vue'

// 定义登录表单类型
interface LoginForm {
  username: string
  password: string
  remember: boolean
}

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const loading = ref(false)
const loginFormRef = ref<FormInstance>()
const loginWrapperRef = ref<HTMLDivElement | null>(null)
const formShake = ref(false)

// 分步动画状态
const stepVisible = ref(0)
const passwordVisible = ref(false)
const capsLockOn = ref(false)

// 登录表单
const loginForm = reactive<LoginForm>({
  username: '',
  password: '',
  remember: false
})

// 表单验证规则
const loginRules: FormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

// 分步显示控制
const showNextStep = (step: number) => {
  if (stepVisible.value < step) {
    stepVisible.value = step
  }
}

// 密码输入处理
const handlePasswordKeydown = (e: Event | KeyboardEvent) => {
  // 确保是键盘事件
  if (e instanceof KeyboardEvent) {
    // 检测 Caps Lock
    capsLockOn.value = e.getModifierState && e.getModifierState('CapsLock')
  }
}

// 3D 倾斜交互
let tiltRaf = 0
let tiltMoveHandler: ((e: MouseEvent) => void) | null = null
let tiltLeaveHandler: (() => void) | null = null
const tiltState = { rx: 0, ry: 0, tx: 0, ty: 0 }
const runTilt = () => {
  tiltState.rx += (tiltState.tx - tiltState.rx) * 0.12
  tiltState.ry += (tiltState.ty - tiltState.ry) * 0.12
  const el = loginWrapperRef.value
  if (el) {
    // 移动端减少倾斜幅度
    const isMobile = window.innerWidth <= 768
    const intensity = isMobile ? 0.3 : 1
    el.style.transform = `perspective(1000px) rotateX(${tiltState.rx * intensity}deg) rotateY(${tiltState.ry * intensity}deg)`
  }
  tiltRaf = requestAnimationFrame(runTilt)
}

tiltMoveHandler = (e: MouseEvent) => {
  const el = loginWrapperRef.value
  if (!el) return
  const rect = el.getBoundingClientRect()
  const dx = (e.clientX - rect.left - rect.width / 2) / rect.width
  const dy = (e.clientY - rect.top - rect.height / 2) / rect.height
  tiltState.tx = -dy * 6
  tiltState.ty = dx * 6
  if (!tiltRaf) tiltRaf = requestAnimationFrame(runTilt)
}

tiltLeaveHandler = () => {
  tiltState.tx = 0
  tiltState.ty = 0
}

onMounted(() => {
  if (userStore.isLoggedIn) {
    router.push('/dashboard')
  }
  
  // 启动分步动画，显示所有表单元素
  setTimeout(() => showNextStep(1), 300)
  setTimeout(() => showNextStep(2), 600)
  setTimeout(() => showNextStep(3), 900)
  setTimeout(() => showNextStep(4), 1200)
  
  const el = loginWrapperRef.value
  if (el) {
    el.addEventListener('mousemove', tiltMoveHandler as (e: MouseEvent) => void)
    el.addEventListener('mouseleave', tiltLeaveHandler as () => void)
  }
})

onUnmounted(() => {
  if (tiltRaf) cancelAnimationFrame(tiltRaf)
  const el = loginWrapperRef.value
  if (el) {
    if (tiltMoveHandler) el.removeEventListener('mousemove', tiltMoveHandler)
    if (tiltLeaveHandler) el.removeEventListener('mouseleave', tiltLeaveHandler)
  }
})

// 密码强度计算
const passwordScore = computed(() => {
  const v = loginForm.password || ''
  let score = 0
  if (v.length >= 6) score++
  if (/[A-Z]/.test(v)) score++
  if (/[a-z]/.test(v)) score++
  if (/[0-9]/.test(v)) score++
  if (/[^A-Za-z0-9]/.test(v)) score++
  return Math.min(score, 4)
})
const passwordLabel = computed(() => {
  const map = ['弱', '一般', '良好', '较强', '很强']
  return map[passwordScore.value]
})
const passwordGradient = computed(() => {
  const colors = [
    'linear-gradient(90deg, #ef4444, #f97316)',
    'linear-gradient(90deg, #f59e0b, #ef4444)',
    'linear-gradient(90deg, #22c55e, #3b82f6)',
    'linear-gradient(90deg, #3b82f6, #8b5cf6)',
    'linear-gradient(90deg, #06b6d4, #8b5cf6)'
  ]
  return colors[passwordScore.value]
})

// 登录处理：失败摇动
const handleLogin = async () => {
  if (!loginFormRef.value) return

  try {
    await loginFormRef.value.validate()
    loading.value = true

    console.log('开始登录请求:', { username: loginForm.username })

    // 调用登录API
    const response = await loginApi({
      username: loginForm.username,
      password: loginForm.password,
      remember: loginForm.remember
    })

    console.log('登录API响应:', response)
    console.log('登录成功，响应数据:', response.data)

    // 检查响应格式 - response.data 是 ApiResponse<LoginData> 类型
    const apiResponse = response.data as LoginResponse
    if (apiResponse && apiResponse.success && apiResponse.data) {
      // 使用用户store保存登录状态（传入data字段中的实际数据）
      await userStore.login(apiResponse.data)
    } else {
      throw new Error('登录响应格式错误')
    }

    ElMessage.success('登录成功')

    // 跳转到保存的路径或仪表盘
    const redirectFromQuery = router.currentRoute.value.query.redirect as string
    const redirectFromStorage = storageManager.getItem<string>('redirectPath')
    
    // 优先使用URL查询参数中的redirect，然后是存储中的路径
    const targetPath = redirectFromQuery || redirectFromStorage || '/dashboard'
    
    // 清除存储的重定向路径
    storageManager.removeItem('redirectPath')
    
    router.push(targetPath)
  } catch (error: any) {
    console.error('=== 登录失败详细调试信息 ===')
    console.error('完整错误对象:', error)
    console.error('错误类型:', typeof error)
    console.error('错误构造函数:', error.constructor?.name)
    console.error('错误响应:', error.response)
    console.error('响应状态码:', error.response?.status)
    console.error('响应数据:', error.response?.data)
    console.error('响应详情字段:', error.response?.data?.detail)
    console.error('响应消息字段:', error.response?.data?.message)
    console.error('错误消息:', error.message)
    console.error('错误代码:', error.code)
    console.error('=== 调试信息结束 ===')
    
    // 优化错误提示，针对不同错误类型显示友好的中文提示
    let errorMessage = '登录失败，请稍后重试'
    
    // 首先检查HTTP状态码，提供针对性的错误提示
    if (error.response) {
      const status = error.response.status
      const errorData = error.response.data
      
      console.log('HTTP状态码:', status)
      console.log('错误响应数据:', errorData)
      
      // 根据HTTP状态码提供友好提示
      switch (status) {
        case 400:
          errorMessage = '请求参数错误，请检查用户名和密码格式'
          break
        case 401:
          errorMessage = '用户名或密码错误，请重新输入'
          break
        case 403:
          errorMessage = '账户已被禁用，请联系管理员'
          break
        case 404:
          errorMessage = '登录服务不可用，请稍后重试'
          break
        case 422:
          errorMessage = '输入信息格式不正确，请检查后重新输入'
          break
        case 429:
          errorMessage = '登录尝试过于频繁，请稍后再试'
          break
        case 500:
          errorMessage = '服务器内部错误，请稍后重试或联系技术支持'
          break
        case 502:
          errorMessage = '服务器网关错误，请稍后重试'
          break
        case 503:
          errorMessage = '服务暂时不可用，请稍后重试'
          break
        case 504:
          errorMessage = '服务器响应超时，请稍后重试'
          break
        default:
          errorMessage = `服务器错误 (${status})，请稍后重试`
      }
      
      // 如果后端返回了具体的错误信息，优先使用后端信息
      if (errorData) {
        // 检查是否为新的统一响应格式
        if (errorData.success === false && errorData.message) {
          console.log('使用统一响应格式的message字段:', errorData.message)
          errorMessage = errorData.message
        }
        // 兼容旧格式的detail字段
        else if (errorData.detail && typeof errorData.detail === 'string') {
          console.log('使用旧格式的detail字段:', errorData.detail)
          errorMessage = errorData.detail
        }
        // 兼容其他可能的message字段
        else if (errorData.message && typeof errorData.message === 'string') {
          console.log('使用message字段:', errorData.message)
          errorMessage = errorData.message
        }
        // 如果都没有，尝试其他可能的字段
        else if (errorData.error && typeof errorData.error === 'string') {
          console.log('使用error字段:', errorData.error)
          errorMessage = errorData.error
        }
      }
    } 
    // 处理没有响应的情况（网络错误等）
    else if (error.code === 'NETWORK_ERROR' || error.message?.includes('Network Error')) {
      errorMessage = '网络连接失败，请检查网络连接后重试'
    } else if (error.code === 'ECONNREFUSED') {
      errorMessage = '无法连接到服务器，请稍后重试'
    } else if (error.message) {
      console.log('使用error.message:', error.message)
      errorMessage = error.message
    }
    
    console.log('最终错误消息:', errorMessage)
    ElMessage.error(errorMessage)
    formShake.value = true
    setTimeout(() => (formShake.value = false), 600)
  } finally {
    loading.value = false
  }
}

// 快速登录
const handleQuickLogin = async (type: 'admin' | 'user') => {
  // 清除表单验证
  if (loginFormRef.value) {
    loginFormRef.value.clearValidate()
  }
  
  // 设置表单数据
  loginForm.username = type
  loginForm.password = '123456'
  loginForm.remember = true
  
  // 确保表单步骤可见
  stepVisible.value = 4
  
  // 等待下一个tick确保DOM更新
  await nextTick()
  
  // 执行登录
  await handleLogin()
}

// 忘记密码
const handleForgotPassword = () => {
  ElMessage.info('忘记密码功能开发中...')
}

// 注册
const handleRegister = () => {
  router.push('/register')
}

// 初始化
onMounted(() => {
  // 如果已经登录，直接跳转
  if (userStore.isLoggedIn) {
    router.push('/dashboard')
  }
})
</script>

<style scoped>
.login-wrapper {
  width: 100%;
  max-width: 1000px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  min-height: 600px;
  position: relative;
  z-index: 1;
}

.login-bg {
  flex: 1;
  background: linear-gradient(135deg, #0f1736 0%, #1d2671 60%, #3a0ca3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  color: white;
  position: relative;
}

/* 保持其余样式不变 */
.bg-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.bg-content h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bg-content p {
  font-size: 18px;
  margin-bottom: 40px;
  opacity: 0.9;
}

.feature-list {
  text-align: left;
  max-width: 300px;
  margin: 0 auto;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-size: 16px;
}

.feature-item .el-icon {
  margin-right: 12px;
  font-size: 18px;
  color: #10b981;
}

.login-form-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
}

.login-form {
  width: 100%;
  max-width: 450px;
}

.form-header {
  text-align: center;
  margin-bottom: 40px;
}

.form-header h2 {
  font-size: 28px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

.form-header p {
  color: #4b5563;
  font-size: 16px;
  font-weight: 400;
}

.el-form-item {
  margin-bottom: 24px;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.form-options .el-checkbox {
  color: #374151;
  font-weight: 500;
}

.form-options .el-link {
  color: #4f46e5;
  font-weight: 500;
}

.login-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
}

.quick-login {
  margin-top: 32px;
}

.divider-text {
  color: #9ca3af;
  font-size: 14px;
  padding: 0 16px;
}

.quick-login-buttons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.quick-login-buttons .el-button {
  flex: 1;
}

.register-link {
  text-align: center;
  margin-top: 32px;
  color: #6b7280;
}

.register-link .el-link {
  margin-left: 8px;
}

.copyright {
  margin-top: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  position: relative;
  z-index: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-wrapper {
    flex-direction: column;
    max-width: 400px;
  }
  
  .login-bg {
    padding: 40px 20px;
  }
  
  .bg-content h1 {
    font-size: 28px;
  }
  
  .bg-content p {
    font-size: 16px;
  }
  
  .feature-list {
    display: none;
  }
  
  .login-form-wrapper {
    padding: 40px 20px;
  }
  
  .form-header h2 {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 10px;
  }
  
  .login-wrapper {
    border-radius: 12px;
  }
  
  .login-bg {
    padding: 30px 15px;
  }
  
  .login-form-wrapper {
    padding: 30px 15px;
  }
  
  .quick-login-buttons {
    flex-direction: column;
  }
}

/* 动画效果 */
.login-wrapper {
  animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-item {
  animation: fadeInLeft 0.6s ease-out;
  animation-fill-mode: both;
}

.feature-item:nth-child(1) { animation-delay: 0.1s; }
.feature-item:nth-child(2) { animation-delay: 0.2s; }
.feature-item:nth-child(3) { animation-delay: 0.3s; }
.feature-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Element Plus 样式覆盖 */
.el-input__wrapper {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.el-input__wrapper:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.el-button--primary {
  background: linear-gradient(135deg, #1d2671 0%, #3a0ca3 100%);
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.el-button--primary:hover {
  background: linear-gradient(135deg, #0f1736 0%, #1d2671 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29, 38, 113, 0.4);
}

.el-button--primary:active {
  transform: translateY(0);
}

/* 分步动画 */
.form-step {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-step.step-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 密码控件样式 */
.password-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  justify-content: flex-end;
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
}

.password-toggle {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.45);
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.password-toggle:hover,
.password-toggle.active {
  color: #4f46e5;
}

.caps-lock-warning {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f59e0b;
  font-size: 12px;
  white-space: nowrap;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* 登录按钮粒子效果 */
.login-btn {
  position: relative;
  overflow: hidden;
}

.btn-loading .btn-text {
  position: relative;
  z-index: 2;
}

.btn-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.4) 50%, 
    transparent 100%);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 移动端优化 */
@media (max-width: 768px) {
  .login-wrapper {
    transform: none !important;
  }
  
  .login-form :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 2px rgba(58, 12, 163, 0.25), 0 4px 12px rgba(58, 12, 163, 0.15);
    transform: none;
  }
  
  .login-form :deep(.el-button--primary) {
    box-shadow: 0 8px 20px rgba(76, 29, 149, 0.25);
  }
  
  .login-form :deep(.el-button--primary:hover) {
    transform: none;
    box-shadow: 0 10px 24px rgba(76, 29, 149, 0.35);
  }
  
  .caps-lock-warning span {
    display: none;
  }
}

/* 玻璃拟态与交互增强 */
.login-wrapper {
  will-change: transform;
  transition: transform 0.25s ease;
}

/* 输入框聚焦高亮 */
.login-form :deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  min-height: 48px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.login-form :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(58, 12, 163, 0.35), 0 6px 18px rgba(58, 12, 163, 0.25);
  transform: translateZ(0) scale(1.01);
  border-color: rgba(58, 12, 163, 0.3);
}

/* 输入框内部元素布局优化 */
.login-form :deep(.el-input__inner) {
  color: #1f2937;
  font-weight: 500;
}

.login-form :deep(.el-form-item:nth-child(2) .el-input__wrapper) {
  position: relative;
}

.login-form :deep(.el-form-item:nth-child(2) .el-input__inner) {
  padding-right: 100px;
}

.login-form :deep(.el-input__suffix) {
  right: 12px;
  z-index: 5;
}

.login-form :deep(.el-input__suffix-inner) {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 输入框占位符文字优化 */
.login-form :deep(.el-input__inner::placeholder) {
  color: #6b7280;
  font-weight: 400;
}

/* 登录按钮宇宙渐变与悬停 */
.login-form :deep(.el-button--primary) {
  background: linear-gradient(135deg, #1d2671 0%, #3a0ca3 100%);
  border: none;
  box-shadow: 0 12px 28px rgba(29, 38, 113, 0.35);
}
.login-form :deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #0f1736 0%, #1d2671 100%);
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(15, 23, 54, 0.45);
}
.login-form :deep(.el-button--primary:active) {
  background: linear-gradient(135deg, #1d2671 0%, #3a0ca3 100%);
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(29, 38, 113, 0.3);
}

/* 密码强度条 */
.password-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: nowrap;
}
.password-strength .bar {
  height: 6px;
  border-radius: 999px;
  flex: 1;
  min-width: 60px;
  transition: width 0.25s ease, background 0.25s ease;
}
.password-strength .label {
  font-size: 12px;
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 错误摇动动画 */
.shake {
  animation: shakeX 0.5s ease;
}
@keyframes shakeX {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
</style>